<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="介绍" name="introinfo"><Introinfo :introinfo="introdleft"></Introinfo></el-tab-pane>
      <el-tab-pane label="演职人员" name="cast"><Info></Info></el-tab-pane>
      <el-tab-pane label="奖项" name="prize"><Info></Info></el-tab-pane>
      <el-tab-pane label="图集" name="pics"><Pics></Pics></el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
/deep/ .el-tabs__item{
  font-size: 18px;
}
/deep/ .el-tabs__item:hover{
    color: red;
}
/deep/ .el-tabs__active-bar{
    background-color: red;
}
/deep/ .el-tabs__item.is-active{
    color: red;
}

</style>
<script>
import Introinfo from './IntroInfo'
import Info from './Info'
import Pics from './Pics'
export default {
  data() {
    return {
      activeName: "introinfo",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  props: {
      introdleft: Object,
      required: true
    },
  components: {
    Introinfo,
    Info,
    Pics,

  }
};
</script>
